<!--
 * @Author       : tingke
 * @Date         : 2021-03-01 10:06:27
 * @LastEditors  : tingke
 * @LastEditTime : 2021-03-02 09:29:26
 * @FilePath     : /React/06_state.html
 * @Description  :
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- react.min.js - React 的核心库 -->
    <script src="./react/react.development.js"></script>
    <!-- react-dom.min.js - 提供与 DOM 相关的功能 -->
    <script src="./react/react-dom.development.js"></script>
    <!-- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。 -->
    <!-- 生产环境中不建议使用 -->
    <script src="./react/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">

        /**
         *  React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
         *  React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
         *
         * */
        class Clock extends React.Component {
            constructor(props) {
                super(props);
                console.log('组件初始化');
                this.state = { date: new Date() };
                this.timerId = null;
            }

            // 生命周期
            componentDidMount() {
                console.log('生命周期: mount');
                this.timerId = setInterval(() => this.tick(), 1000);
            }
            componentWillUnMount() {
                console.log('生命周期: unmount');
                clearInterval(this.timerId);
            }

            tick() {
                console.log('注意this指向', this);
                // 使用 setState 更新 state 的值
                this.setState({
                    date: new Date()
                });
            }

            render() {
                return (
                    <div>
                        <h1>Hello, React!</h1>
                        <h2>现在时间：{this.state.date.toLocaleTimeString()}.</h2>
                    </div>
                )
            }
        }

        ReactDOM.render(
            <Clock />,
            document.getElementById('example')
        );
    </script>
</body>
</html>
